import React from 'react';
import { inject, observer} from 'mobx-react';
import {Spin,Table,Icon } from 'antd';
import { WeaLocaleProvider,WeaEchart} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
const toJS = mobx.toJS;
@inject('taskReportStore')
@observer
export default class SubReport extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        columns:[
          {title: getLabel(33553,'分部'),dataIndex: 'showname',width:'30%',
          sorter: (a, b) => a.id - b.id,
          render:(text, record, index) =>
            <div className="wea-workrelate-table-inlineblock">
              {record.curtype=="sub"?<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@oj7sas@${record.curtype+record.id}`} type="home" className="wea-workrelate-table-i"/>:<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@kb04ag@${record.curtype+record.id}`} type="folder" className="wea-workrelate-table-i"/>}
              <span title={text} className="wea-workrelate-table-mleft">{text}</span>
            </div>
          },
          {title: getLabel(382623,'任务数'),dataIndex: 'total',width:'15%',
          sorter: (a, b) => a.total - b.total},
          {title: getLabel(21984,'已超期'),dataIndex: 'overtime',width:'15%',
          sorter: (a, b) => a.overtime - b.overtime},
          {title: getLabel(1960,'进行中'),dataIndex: 'doing', width:'15%',
          sorter: (a, b) => a.doing - b.doing},
          {title: getLabel(1961,'已完成'),dataIndex: 'finish',width:'15%',
          sorter: (a, b) => a.finish - b.finish},
          {title: getLabel(104,'操作'),dataIndex: 'id',width:'10%',
          render:(text, record, index) =><div title={getLabel(382624,'查看明细')} onClick={()=>this.viewPersonDetail(text,record.curtype)} className="operates-cur">{getLabel(382624,'查看明细')}</div>
          }
        ],
      }
    }
    componentWillMount() {//一些初始化请求
     
    }
    componentDidUpdate(){
      const{taskReportStore} = this.props;
      if(taskReportStore.isechart==1 && this.refs.chart1){
        this.refs.chart1.clear();
        this.refs.chart1.paint();
      }
    }
    viewPersonDetail(id,type){
      const{taskReportStore} = this.props;
      if(type=="sub"){
        taskReportStore.viewDetail({type:1,subcompanyids:id,cpyincludesub:3});
      }else{
        taskReportStore.viewDetail({type:1,departmentids:id,deptincludesub:3});
      }
    }
    onSelectChange = (selectedRowKeys,selectedRows) => {
      const { taskReportStore } = this.props;
      taskReportStore.selectedRows = selectedRows;
      taskReportStore.selectedRowKeys = selectedRowKeys;
    }
    render() {
      const{taskReportStore,_height} = this.props;
      const{columns} = this.state;
      const{datalist,selectedRowKeys,loading,isechart,options} = taskReportStore;
      return (
        <div className="wea-workrelate-task-tasksubreport" style={{height:"100%"}}>
        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@o4bl49`} spinning={loading}>
         {
           isechart==0?<Table ecId={`${this && this.props && this.props.ecId || ''}_Table@11k0op`} columns={columns} bordered={false} scroll={{y: _height - 155}} dataSource={datalist} className="wea-workrelate-antd-table"
           rowSelection={{
             selectedRowKeys:selectedRowKeys,
             onChange: this.onSelectChange,
           }} pagination ={false}/>:
           <div style={{marginTop:"10px"}}><WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@5c3011`} style={{height:_height - 155}} ref="chart1" option={toJS(options)} useDefault={false} /></div>
         }
          </Spin>
        </div>
    )
  }
};